<template>
  <div>
    <div class="block">
      <span class="demonstration" style="display: block"
        >选择你想查看的日期</span
      >
      <el-date-picker
        v-model="time"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        style="margin-top: 1%; margin-left: 1%"
        @change="timeChange"
      >
      </el-date-picker>
      <el-button
        type="success"
        style="margin-left: 3%"
        :disabled="submitData.length == 0"
        @click="submitOrder"
        >点击这里开始配送这些订单，请仔细检查这些订单地址是否顺路</el-button
      >
    </div>

    <div class="table">
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 0.7%"
        height="850"
        border
        stripe
        v-loading="loading"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="40"
          fixed
          :selectable="selectable"
        >
        </el-table-column>
        <el-table-column type="expand" fixed>
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="图片">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="props.row.picture"
                  fit="cover"
                ></el-image>
              </el-form-item>
              <el-form-item label="订购人">
                <span>{{ props.row.userName }}</span>
              </el-form-item>
              <el-form-item label="订购商品">
                <span>{{ props.row.goodsName }}</span>
              </el-form-item>
              <el-form-item label="订购数量">
                <span>{{ props.row.num }}</span>
              </el-form-item>
              <el-form-item label="收货时间">
                <span>{{ props.row.goodsTime | timestampToTime }}</span>
              </el-form-item>
              <el-form-item label="详细地址">
                <span>{{ props.row.address }}</span>
              </el-form-item>
              <el-form-item label="联系电话">
                <span>{{ props.row.phone }}</span>
              </el-form-item>
              <el-form-item label="本次营收">
                <span>{{ props.row.money }}</span>
              </el-form-item>
              <el-form-item label="支付方式">
                <span>{{ (props.row.payMethod == 0) | methodPayFilter }}</span>
              </el-form-item>
              <el-form-item label="订单状态">
                <span>{{ props.row.orderStatus | orderStatus }}</span>
              </el-form-item>
              <el-form-item label="订单号">
                <span>{{ props.row.orderNo }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="stime" label="时间" width="180">
          <template slot-scope="scope">{{
            scope.row.createTime | timestampToTime
          }}</template>
        </el-table-column>
        <el-table-column
          label="商品名"
          prop="goodsName"
          align="center"
          width="200"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="订购数量" align="center">
          <template slot-scope="scope" width="200">
            {{ scope.row.num }}
          </template>
        </el-table-column>
        <el-table-column label="配送信息" align="center" width="200">
          <el-table-column
            label="订购人"
            prop="userName"
            width="110"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="详细地址"
            align="center"
            width="200"
          >
          </el-table-column>
          <el-table-column
            prop="phone"
            label="联系电话"
            align="center"
            width="160"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column label="状态" width="160" align="center" fixed="right">
          <template slot-scope="scope">
            <el-tag
              type="warn"
              v-if="scheduledTime(scope.row.goodsTime) != null"
              >{{ scheduledTime(scope.row.goodsTime) + "可配送" }}</el-tag
            >
            <el-tag
              
              effect="dark"
              v-if="
                scope.row.orderStatus == 0 &&
                scheduledTime(scope.row.goodsTime) == null
              "
            >
              未配送
            </el-tag>
            <el-tag
              type="success"
              effect="dark"
              v-if="
                scope.row.orderStatus == 1 &&
                scheduledTime(scope.row.goodsTime) == null
              "
            >
              配送中
            </el-tag>
            <el-tag
              type="info"
              effect="dark"
              v-if="
                scope.row.orderStatus == 2 &&
                scheduledTime(scope.row.goodsTime) == null
              "
            >
              配送完成
            </el-tag>
            <el-tag
              type="danger"
              effect="dark"
              v-if="scope.row.orderStatus == 3"
              >已取消订单</el-tag
            >
          </template>
        </el-table-column>
      </el-table>
       <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="11"
        @current-change="currentChange"
        :current-page="$store.getters.getSupplierCurrent"
      >
      </el-pagination>
    </div>
    </div>
  </div>
</template>

<script>
import { getSupplierOrderList, distribution } from "@/api/orderApi";
export default {
  filters: {
    timestampToTime(timestamp) {
      if (timestamp == null) {
        return "客户未指定收货时间";
      } else {
        let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        let Y = date.getFullYear() + "-";
        let M =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "-";
        let D =
          (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
        let h =
          (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
          ":";
        let m =
          (date.getMinutes() < 10
            ? "0" + date.getMinutes()
            : date.getMinutes()) + ":";
        let s =
          date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        return Y + M + D + h + m + s;
      }
    },
    methodPayFilter(value) {
      if (value == 0) {
        return "线下货到结算";
      } else if (value == 1) {
        return "支付宝支付";
      } else {
        return "微信支付";
      }
    },
    orderStatus(vaule) {
      switch (vaule) {
        case 0:
          return "未配送";
          break;
        case 1:
          return "配送中";
          break;
        case 2:
          return "交易完成";
          break;
        case 3:
          return "用户取消订单";
          break;
      }
    },
  },
  data() {
    return {
      stime: false,
      loading: true,
      tableData: [],
      submitData: [],
      total : 0,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
        disabledDate: (time) => {
          return time.getTime() > new Date(new Date().getTime());
        },
      },
      value1: "",
      time: [],
    };
  },
  created() {
    // this.scheduledTime(1607321557238);
    this.initData();
  },
  methods: {
    timeChange(){
       this.loading = true
      this.initData(this.time[0].getTime(),this.time[1].getTime())
    },
    initData(begin,end) {
      getSupplierOrderList(this.$store.getters.getSupplierCurrent,begin,end).then((res) => {
        if (res.code == 0) {
          // console.log(res.data);
          this.tableData = res.data.orderData;
          this.total = res.data.size
          this.loading = false;
        } else {
          this.loading = false;
          this.$message.error(res.message);
        }
      }).catch(err => {
        this.loading = false;
      });
    },
    currentChange(current){
      this.$store.commit("setSupplierCurrent",current)
      this.loading = true;
      if(this.time == "" || this.time.size < 2){
        this.initData()
      }
      else {
        this.initData(this.time[0].getTime(),this.time[1].getTime())
      }
    },
    submitOrder() {
      this.$confirm(
        "此操作将这些订单合并为一个配送订单,并推荐配送路线, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.loading = true
          distribution(this.submitData).then((res) => {
            if (res.code == 0) {
              this.$message.success("合并订单成功");
              this.initData();
            } else {
              this.$message.error(res.message);
            }
            this.loading = false
          }).catch(err => {
            this.loading = false
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
          this.loading = false
        });
    },
    scheduledTime(time) {
      if (time == null) {
        return null;
      }
      let now = new Date();
      let ctime = new Date(time);
      if (now.getTime() > time) {
        return null;
      } else if (now.getDate() == ctime.getDate()) {
        return null;
      } else {
        this.stime = true;
        let date = new Date(time); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        let Y = date.getFullYear() + "-";
        let M =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "-";
        let D =
          (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
        return Y + M + D;
      }
    },
    handleSelectionChange(data) {
      this.submitData = data;
    },
    selectable(row, index) {
      if (row.orderStatus == 0 && this.scheduledTime(row.goodsTime) == null) {
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.pagination {
  margin: 3% 0 0 0;
}
.demonstration {
  margin-top: 2%;
  text-indent: 1em;
  font-family: 微软雅黑;
}
.demo-table-expand {
  font-size: 0;
  clear: both;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>